<template>
	<el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改' " :close-on-click-modal='false'
		:close-on-press-escape='false' :fullscreen='true'  >
		<el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataFormRef"
			@keyup.enter.native="dataFormSubmitHandle()" label-width="120px">

			<el-form-item label="物料编码" prop="sku">
				<el-input size="small" v-model="dataForm.sku" placeholder="物料编码" :disabled="!!dataForm.id"></el-input>
			</el-form-item>
			<el-form-item label="物料名称" prop="descr">
				<el-input size="small" v-model="dataForm.descr" placeholder="物料名称"></el-input>
			</el-form-item>

			<el-form-item label="分类" prop="sortvalue">
				<!-- <el-input v-model="dataForm.sort" placeholder="分类"></el-input> -->
				<el-cascader size="small" v-model="dataForm.sortvalue" :options="skucategoryList"
					:props="{ value: 'categorykey' ,label:'name' }" :show-all-levels="false" @change="handleChange"
					clearable>
				</el-cascader>


			</el-form-item>
			<el-form-item label="规格" prop="specs">
				<el-input size="small" v-model="dataForm.specs" placeholder="规格"></el-input>
			</el-form-item>
			<el-form-item label="流水号" prop="serialnumber" :v-if="!dataForm.id">
				<el-input size="small" v-model="dataForm.serialnumber" placeholder="流水号"></el-input>
			</el-form-item>

			<el-form-item label="单位" prop="unit">
				<el-input size="small" v-model="dataForm.unit" placeholder="单位"></el-input>
			</el-form-item>
			<el-form-item label="价格" prop="price">
				<el-input size="small" v-model="dataForm.price" placeholder="价格"></el-input>
			</el-form-item>
			<el-form-item label="是否消耗品" prop="isconsumable">
				<!-- <el-input v-model="dataForm.isconsumable" placeholder="是否消耗品"></el-input> -->
				<el-select size="small" v-model="dataForm.isconsumable">
					<el-option v-for="item in yesornos" :key="item.list" :label="item.listname" :value="item.list">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="生产厂家" prop="factory">
				<el-input size="small" v-model="dataForm.factory" placeholder="生产厂家"></el-input>
			</el-form-item>
			<el-form-item label="计量编码/工装号" prop="factorycdoe">
				<el-input size="small" v-model="dataForm.factorycdoe" placeholder="计量编码/工装号"></el-input>
			</el-form-item>
			<el-form-item label="产品代号" prop="product">
				<el-input size="small" v-model="dataForm.product" placeholder="产品代号"></el-input>
			</el-form-item>
			<el-form-item label="名称" prop="name">
				<el-input size="small" v-model="dataForm.name" placeholder="名称"></el-input>
			</el-form-item>
			<el-form-item label="安全库存" prop="safetyqty">
				<el-input size="small" v-model="dataForm.safetyqty" placeholder="安全库存"></el-input>
			</el-form-item>
			<el-form-item label="唯一码管理" prop="isuniquecode">
				<el-select size="small" v-model="dataForm.isuniquecode">
					<el-option v-for="item in yesornos" :key="item.list" :label="item.listname" :value="item.list">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="精度等级" prop="accuracyclass">
				<el-input size="small" v-model="dataForm.accuracyclass" placeholder="精度等级"></el-input>
			</el-form-item>
			<el-form-item label="有效期天数" prop="effectlife">
				<el-input size="small" v-model="dataForm.effectlife" placeholder="有效期天数"></el-input>
			</el-form-item>

			<el-form-item label="提前预警天数" prop="warningdays">
				<el-input size="small" v-model="dataForm.warningdays" placeholder="提前预警天数"></el-input>
			</el-form-item>

			<el-form-item label="上架策略" prop="strategykey">
				<!-- <el-input v-model="dataForm.strategykey" placeholder="上架策略"></el-input> -->
				<el-select size="small" v-model="dataForm.strategykey">
					<el-option value="" label="--"> </el-option>
					<el-option v-for="item in getPutawaystrategyList" :key="item.strategykey" :label="item.strategyname"
						:value="item.strategykey">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="上架区" prop="zonecode">
				<!-- <el-input v-model="dataForm.zonecode" placeholder="上架区"></el-input> -->
				<el-select size="small" v-model="dataForm.zonecode">
					<el-option value="" label="--"> </el-option>
					<el-option v-for="item in zoneList" :key="item.zonecode" :label="item.zonename"
						:value="item.zonecode">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="分配策略" prop="allocationstrategy">
				<!-- <el-input v-model="dataForm.allocationstrategy" placeholder="分配策略"></el-input> -->
				<el-select size="small" v-model="dataForm.allocationstrategy " placeholder="请选择">
					<el-option v-for="item in allocationstrategys" :key="item.strategykey" :label="item.strategyname"
						:value="reString(item.strategykey)">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="周转" prop="rolateby">
				<el-select size="small" v-model="dataForm.rolateby">
					<el-option value="" label="--"> </el-option>
					<el-option v-for="item in rolatebys" :key="item.list" :label="item.listname" :value="item.list">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="批次规则" prop="lotrule">
				<el-input size="small" v-model="dataForm.lotrule" placeholder="批次规则"></el-input>
			</el-form-item>

			<el-form-item label="长度" prop="length">
				<el-input size="small" v-model="dataForm.length" placeholder="长度"></el-input>
			</el-form-item>
			<el-form-item label="宽度" prop="width">
				<el-input size="small" v-model="dataForm.width" placeholder="宽度"></el-input>
			</el-form-item>
			<el-form-item label="高度" prop="height">
				<el-input size="small" v-model="dataForm.height" placeholder="高度"></el-input>
			</el-form-item>

			<el-form-item label="重量" prop="weight">
				<el-input size="small" v-model="dataForm.weight" placeholder="重量"></el-input>
			</el-form-item>
			<!-- 	<el-form-item label="物料状态" prop="status">
				<el-input v-model="dataForm.status" placeholder="物料状态"></el-input>
			</el-form-item> -->

			<el-form-item label="包装" prop="pack">
				<el-input size="small" v-model="dataForm.pack" placeholder="包装"></el-input>
			</el-form-item>
			<el-form-item label="备用字段1" prop="reserve1">
				<el-input size="small" v-model="dataForm.reserve1" placeholder="备用字段1"></el-input>
			</el-form-item>
			<el-form-item label="备用字段2" prop="reserve2">
				<el-input size="small" v-model="dataForm.reserve2" placeholder="备用字段2"></el-input>
			</el-form-item>
			<el-form-item label="备用字段3" prop="reserve3">
				<el-input size="small" v-model="dataForm.reserve3" placeholder="备用字段3"></el-input>
			</el-form-item>
			<el-form-item label="备用字段4" prop="reserve4">
				<el-input size="small" v-model="dataForm.reserve4" placeholder="备用字段4"></el-input>
			</el-form-item>
			<el-form-item label="备用字段5" prop="reserve5">
				<el-input size="small" v-model="dataForm.reserve5" placeholder="备用字段5"></el-input>
			</el-form-item>

		</el-form>
		<template #footer>
			<el-button size="small" @click="visible = false">取消</el-button>
			<el-button size="small" type="primary" @click="dataFormSubmitHandle()">确定</el-button>
		</template>
	</el-dialog>
</template>

<script>
	import {
		ref,
		reactive,
		onMounted,
		nextTick,
		computed
	} from 'vue';
	import {
		getSkuById,
		putSku,
		postSku
	} from "@/network/lswms/base/Sku"
	import {
		ElMessage
	} from 'element-plus'
	import {
		getzonelist
	} from "@/network/lswms/base/Zone.js"
	import {
		getPutawaystrategyPage
	} from "@/network/lswms/base/Putawaystrategy.js"
	import {
		getAllocationstrategyPage
	} from "@/network/lswms/base/Allocationstrategy.js"
	import {
		getCodeListByCode
	} from "@/network/lswms/base/Codelist.js"

	import {
		getSkucategoryById,
		getSkucategoryByType
	} from "@/network/lswms/base/Skucategory"

	import _ from 'lodash'


	export default {
		name: "skuAddOrUpdate",
		emits: ["refreshDataList"],
		setup(props, {
			emit
		}) {
			const visible = ref(false);
			const dataForm = ref({
					id: '',
					sku: '',
					descr: '',
					pack: '',
					sort: '',
					sortvalue:[],
					sortName: '',
					specs: '',
					serialnumber: '',
					unit: '',
					price: '',
					isconsumable: '0',
					factory: '',
					factorycdoe: '',
					name: '',
					safetyqty: 0,
					isuniquecode: '0',
					accuracyclass: '',
					effectlife: '',
					warningdays: '',
					weight: '',
					length: '',
					width: '',
					height: '',
					lotrule: '',
					status: '',
					reserve1: '',
					reserve2: '',
					reserve3: '',
					reserve4: '',
					reserve5: '',
					adduser: '',
					addtime: '',
					updatuser: '',
					updatetime: '',
					strategykey: '0000000002',	
					zonecode: '',	
					allocationstrategy: 'N01',
					rolateby: 'lot1',	
					minimum	: '',
					unitprice: '',	
					specs: '',	
					isconsumable: '',	
					price: 0,	
					factory: '',	
					factorycdoe: '',	
					name: '',	
					safetyqty: '',	
					accuracyclass: '',	
					effectlife: 0,	
					warningdays: 0,
					product:''
				});


			const dataRule = reactive({
				// sku: [{
				// 	required: true,
				// 	message: '必填项不能为空',
				// 	trigger: 'blur'
				// }],
				descr: [{
					required: true,
					message: '必填项不能为空',
					trigger: 'blur'
				}],
				// pack: [{
				// 	required: true,
				// 	message: '必填项不能为空',
				// 	trigger: 'blur'
				// }],
				sort: [{
					required: true,
					message: '必填项不能为空',
					trigger: 'blur'
				}],
				// unit: [{
				// 	required: true,
				// 	message: '必填项不能为空',
				// 	trigger: 'blur'
				// }],
				/*          weight: [
				            { required: true, message: '必填项不能为空', trigger: 'blur' }
				          ],          length: [
				            { required: true, message: '必填项不能为空', trigger: 'blur' }
				          ],          width: [
				            { required: true, message: '必填项不能为空', trigger: 'blur' }
				          ],          height: [
				            { required: true, message: '必填项不能为空', trigger: 'blur' }
				          ],          lotrule: [
				            { required: true, message: '必填项不能为空', trigger: 'blur' }
				          ],          isuniquecode: [
				            { required: true, message: '必填项不能为空', trigger: 'blur' }
				          ],          status: [
				            { required: true, message: '必填项不能为空', trigger: 'blur' }
				          ],          reserve1: [
				            { required: true, message: '必填项不能为空', trigger: 'blur' }
				          ],          reserve2: [
				            { required: true, message: '必填项不能为空', trigger: 'blur' }
				          ],          reserve3: [
				            { required: true, message: '必填项不能为空', trigger: 'blur' }
				          ],          reserve4: [
				            { required: true, message: '必填项不能为空', trigger: 'blur' }
				          ],          reserve5: [
				            { required: true, message: '必填项不能为空', trigger: 'blur' }
				          ],  */
			})

		
			const dataFormRef = ref(null)

			const init = () => {
				visible.value = true;

				dataForm.value.sortName = ''
				dataForm.value.sortvalue = [];
				dataForm.value.sort=''
				nextTick(function() {
					dataFormRef.value.resetFields();
					
					getPutawaystrategyListFn();
					getZoneListFn()
					rolatebyFn()
					allocationstrategyFn()
					getSkucategoryList()
					yesornoFn()
					if (dataForm.value.id) {
						getskuInfo();
					}
				})
			}

			const getskuInfo = () => {
				getSkuById(dataForm.value.id).then(function(res) {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					dataForm.value = _.assignIn({}, dataForm.value, res.data);
					if (dataForm.value.sort) {
						let dataArray = dataForm.value.sort.split('#');
						dataForm.value.sortvalue = dataArray.filter(function(item, index) {
							return item.length > 0
						})
					}
				}).catch((err) => {});
			}

			const zoneList = ref({});
			const getZoneListFn = () => {
				getzonelist().then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					zoneList.value = res.data;
				}).catch((err) => {});
			}

			const rolatebys = ref("");
			const rolatebyFn = () => {
				getCodeListByCode('rolateby').then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					rolatebys.value = res.data;
				}).catch((err) => {});
			}
			const getPutawaystrategyList = ref({});
			const getPutawaystrategyListFn = () => {
				getPutawaystrategyPage().then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					getPutawaystrategyList.value = res.data.list;
				}).catch((err) => {});
			}


			const allocationstrategys = ref("");
			const allocationstrategyFn = () => {
				getAllocationstrategyPage().then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					allocationstrategys.value = res.data.list;
				}).catch((err) => {});
			}

			const yesornos = ref("");
			const yesornoFn = () => {
				getCodeListByCode('YESORNO').then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					yesornos.value = res.data;
				}).catch((err) => {});
			}

			const skucategoryList = ref([]);
			const getSkucategoryList = () => {
				return getSkucategoryByType(0)
					.then(function(res) {
						if (res.code !== 0) {
							return ElMessage.error(res.msg);
						}
						//skucategoryList.value = res.data;
						let data1 = [];
						createList(res.data, data1);

						skucategoryList.value = data1;
					})
					.catch(function() {});
			}

			//去掉返回tree中children为空的数据
			const createList = (sourcedata, targetdata) => {
				for (let i = 0; i < sourcedata.length; i++) {
					let tempdata = sourcedata[i];
					if (tempdata.children.length > 0) {
						let children = {
							categorykey: '',
							name: '',
							children: []
						}
						children.categorykey = tempdata.categorykey;
						children.name = tempdata.name;
						createList(tempdata.children, children.children);
						targetdata.push(children)
					} else {
						let children = {
							categorykey: '',
							name: ''
						}
						children.categorykey = tempdata.categorykey;
						children.name = tempdata.name;
						targetdata.push(children)
					}
				}
			}

			//将联级选择的数组拼接为字符串，用#隔开
			const handleChange = (value) => {
				dataForm.value.sort = "";
				if (!value) {
					return;
				}
				for (let i = 0; i < value.length; i++) {
					dataForm.value.sort += value[i] + '#';
				}
				
			}

			// 表单提交
			const dataFormSubmitHandle = _.debounce(() => {
				dataFormRef.value.validate(function(valid) {
					if (!valid) {
						return false;
					}

					let qing = () => {
						return !dataForm.value.id ? postSku(dataForm.value) : putSku(dataForm.value)
					}
					qing().then(function(res) {
						if (res.code !== 0) {
							return ElMessage.error(res.msg);
						}
						ElMessage({
							message: '操作成功',
							type: 'success',
							duration: 500,
							onClose: function() {
								visible.value = false
								emit('refreshDataList')
							}
						})
					}).catch(function() {});

				})
			}, 1000, {
				'leading': true,
				'trailing': false
			})

			return {
				visible,
				dataForm,
				dataRule,
				init,
				dataFormSubmitHandle,
				dataFormRef,
				zoneList,
				getPutawaystrategyList,
				rolatebys,
				allocationstrategys,
				skucategoryList,
				yesornos,
				handleChange,
			}
		},
		methods: {
			reString: function(val) {
				let n = Number(val)
				if (!isNaN(n)) {
					return n
				} else {
					return val
				}
			}
		}

	}
</script>

<style scoped>

</style>
